<template>
    <view :style="{ '--color': color }">
        <status-bar title="提现"></status-bar>

        <view class="navBox">
            <u-tabs :list="payInfo" keyName="to_name" @click="click" :current="current" lineWidth="28" :lineColor="color" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
        </view>

        <block v-for="(item, index) in payInfo" :key="index">
            <view class="wechat" :class="(item.cash_method == 6 && cxtStatus == 1) || (item.cash_method != 6 && item.bankName) ? 'backgg' : 'flexac'" @click="addAcount(item)" v-if="current == index">
                <view class="d-flex a-center" v-if="(item.cash_method == 6 && cxtStatus == 1) || (item.cash_method != 6 && item.bankName)">
                    <image :src="$imgUrls(item.account_img)" mode="aspectFit" class="CodineIMG" v-if="item.account_img"></image>
                    <view class="d-flex f-column m-left20">
                        <text class="white size32 bold">{{ item.bankName }}</text>
                        <text class="white size26 m-top20">{{ item.userName }}（{{ item.phone || item.bankCard }}）</text>
                    </view>
                </view>
                <view class="d-flex a-center color bold" v-else>
                    <view class="iconfont icon-tianjia h6"></view>
                    <text class="size28 m-left10" v-if="item.cash_method == 6">{{ cxtStatus == 101 ? '点击去认证' : '点击去绑卡' }}</text>
                    <text class="size28 m-left10" v-else>{{ item.cash_method | methodTxt }}</text>
                </view>
            </view>
        </block>

        <view class="duihne">
            <view class="row j-sb a-center">
                <text class="color_38 size28 bold">提现金额</text>
                <view class="withBtn" @click="toUrl('/moneyPage/capital/detail')">提现记录</view>
            </view>

            <view class="row a-center m-top20 bot">
                <image :src="$pop.staticImg('jifen.png')" class="jifenIcon"></image>
                <input type="number" v-model="money" @input="inputMoney" class="Jifen" placeholder="请填写提现金额" />
                <text class="color bold size26" @click="Exchange" v-if="pageData.income > 0">全部提现</text>
            </view>
            <text class="color_66 size26 m-top14" v-if="!money">当前账号可提现金额：{{ pageData.income }}</text>
            <text class="color_66 size26 m-top14" v-else>{{ FeesTxt }}</text>
            <view class="row j-sa a-center m-top50">
                <view class="btns flexac bgf4 size26 color_38" @click="$back()">考虑一下</view>
                <view class="btns flexac config size26 white" @click="SellBtn">立即提现</view>
            </view>
        </view>

        <view class="viewboxs auto m-top20">
            <u-parse :content="pageData.desc" :domain="imgUrl"></u-parse>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                imgUrl: this.imgUrl,
                pageData: '',
                payInfo: [],
                itemStyle: {
                    height: '102rpx'
                },
                activeStyle: {
                    color: '',
                    fontSize: '30rpx',
                    fontWeight: 'bold'
                },
                inactiveStyle: {
                    color: '#333333',
                    fontSize: '28rpx'
                },
                current: 0,
                money: '',
                cxtStatus: '', // 1正常提现、101未认证、24已认证未绑卡
                jumpUrl: '',
                FeesTxt: ''
            };
        },

        onShow() {
            this.activeStyle.color = this.color;
            this.cashRecordDetail();
        },
        methods: {
            // 诚薪通
            // 获取用户当前认证状态
            getStatus() {
                this.$http
                    .get({
                        url: '/cxtApi/getUserStatus'
                    })
                    .then((res) => {
                        this.cxtStatus = res.code;
                        if (res.code == 101) this.getHomeUrl();
                        if (res.code == 24) this.getCashOutUrl();
                    });
            },
            // 获取认证链接
            getHomeUrl() {
                this.$http
                    .get({
                        url: '/cxtApi/getHomeUrl'
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.jumpUrl = res.data;
                    });
            },
            // 获取提现链接
            getCashOutUrl() {
                this.$http
                    .get({
                        url: '/cxtApi/getCashOutUrl'
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.jumpUrl = res.data;
                    });
            },
            cashRecordDetail() {
                this.$http
                    .get({
                        url: '/zzj_singleSaleApi/cashRecordDetail'
                    })
                    .then((res) => {
                        if (res.code != '200') return this.$Toast(res.msg);
                        const result = res.data;
                        this.pageData = result;
                        this.payInfo = result.payInfo || [];
                        if (this.payInfo.length) {
                            // 诚薪通
                            let cxt = this.payInfo.find((item) => item.cash_method == 6);
                            if (cxt) this.getStatus();
                        }
                    });
            },
            click(e) {
                this.current = e.index;
            },
            Exchange() {
                this.money = this.pageData.income;
            },
            addAcount(item) {
                if (item.cash_method == 1) return this.toUrl(`addBank`);
                if (item.cash_method == 4 || item.cash_method == 5) {
                    this.toUrl(`addKuan?cash_method=${item.cash_method}`);
                }
                if (item.cash_method == 6 && this.cxtStatus != 1) this.toUrl('/userPage/onlineService/webHttp?isURL=' + this.jumpUrl);
            },
            SellBtn() {
                const result = this.payInfo[this.current];
                console.log(result, 'result');
                if (result.cash_method == 1 && !result.bankCard) return this.$Toast(`请添加银行卡`);
                if ((result.cash_method == 4 && !result.userName) || (result.cash_method == 5 && !result.userName)) return this.$Toast(`请添加收款信息`);
                if (result.cash_method == 6 && this.cxtStatus != 1) {
                    if (this.cxtStatus == 101) this.$Toast('请先完成认证');
                    if (this.cxtStatus == 24) this.$Toast('请先完成绑卡');
                    return;
                }
                if (!this.money) return this.$Toast(`提现金额不能为空！`);
                this.$http
                    .post({
                        url: '/singleSaleApi/CommissionWithdrawal',
                        data: {
                            money: this.money,
                            bankCard: result.bankCard,
                            cash_method: result.cash_method
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        this.$Toast(res.msg);
                        this.money = '';
                        this.cashRecordDetail();
                    });
            },
            inputMoney(event) {
                const money = event.detail.value;
                const result = this.payInfo[this.current];

                this.$http
                    .post({
                        url: '/singleSaleApi/getTransactionFees',
                        data: {
                            money: this.money,
                            cash_method: result.cash_method
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.Toast(res.msg);
                        this.FeesTxt = res.text;
                    });
            }
        },
        computed: {
            ...mapState(['color'])
        },
        filters: {
            methodTxt(cash_method) {
                switch (cash_method) {
                    case 1:
                        return '点击添加银行卡';
                    case 2:
                        return '到微信红包';
                    case 3:
                        return '到余额';
                    case 4:
                        return '点击添加微信收款码';
                    case 5:
                        return '点击添加支付宝收款码';
                    default:
                        return '';
                }
            }
        }
    };
</script>
<style lang="scss">
    page {
        background-color: #f8f8f8;
    }
</style>
<style lang="scss" scoped>
    .navBox {
        width: 690rpx;
        margin: 0 auto;
    }

    .duihne {
        width: 670rpx;
        background-color: #ffffff;
        margin: 30rpx auto 0;
        padding: 30rpx 30rpx 50rpx 30rpx;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;

        .withBtn {
            color: #999;
            font-size: 26rpx;
            padding: 2rpx 20rpx;
        }
    }

    .Jifen {
        flex: 1;
        height: 80rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        color: #333333;
    }

    .jifenIcon {
        width: 27rpx;
        height: 29rpx;
    }

    .btns {
        width: 258rpx;
        height: 76rpx;
        border-radius: 38rpx;
    }

    .config {
        background-color: var(--color);
    }

    .wechat {
        width: 670rpx;
        min-height: 180rpx;
        background-color: #ffffff;
        margin: 20rpx auto;
        padding: 20rpx;
        border-radius: 20rpx;
    }

    .wechatImg {
        width: 100%;
        height: 300rpx;
    }

    .CodineIMG {
        width: 100rpx;
        height: 100rpx;
    }

    .backgg {
        display: flex;
        align-items: center;
        padding-left: 50rpx;
        background-color: var(--color);
    }
</style>
